<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" id="allCheck" v-model="changeAll"></th>
                    <th>编号</th>
                    <th>名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list" :key="item.id">
                    <td><input type="checkbox" class="ck" v-model="item.change"></td>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button class="sub" @click="subHandler(item.id)">-</button>
                        {{item.number}}
                        <button class="add" @click="addHandler(item.id)">+</button>
                    </td>
                    <td>{{item.price * item.number}}</td>
                    <td><button @click="delHandler(item.id)">删除</button></td>
                </tr>
            </tbody>
        </table>
        <span>商品数量：{{sumNumber}}，</span>
        <span>合计：￥{{sumPrice}}</span>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    // 定义购物车的数据
    const list = [
        { id: "01001", change: false, name: "铅笔", price: "1.5", number: "1" },
        { id: "01002", change: false, name: "刚笔", price: "2.5", number: "1" },
        { id: "01003", change: false, name: "毛笔", price: "3.5", number: "1" },
        { id: "01004", change: false, name: "水笔", price: "4.5", number: "1" }
    ]

    // 创建vue实例
    const vm = new Vue({
        el: "#app",
        data: {
            list
        },
        computed: {
            // 全选实现
            changeAll: {
                // 检查购物车列表中的每一项change
                get() {
                    return this.list.every(item => item.change)
                },
                // 根据返回值利用foeEach修改list所有状态
                set(val) {
                    return this.list.forEach(item => item.change = val)
                }
            },
            // 商品总数
            sumNumber() {
                // 定义总数变量
                let number = 0
                this.list.forEach(item => {
                    if (item.change) {
                        number += item.number - 0
                    }
                })
                return number
            },
            // 商品总价
            sumPrice() {
                // 定义总价变量
                let price = 0
                this.list.forEach(item => {
                    if (item.change) {
                        price += item.price * item.number - 0
                    }
                })
                return price
            }
        },
        methods: {
            // 减少按钮
            subHandler(id) {
                // 匹配点击的id
                let sub = this.list.find(item => item.id === id)
                // console.log(sub);
                if (sub.number <= 1) return
                sub.number--
            },
            // 增加按钮
            addHandler(id) {
                let add = this.list.find(item => item.id === id)
                add.number++
            },
            // 删除按钮
            delHandler(id) {
                this.list = this.list.filter(item => item.id != id)
            }
        }
    })
</script>